<template>
	<view style="background: #F6F7FB;">
		<!-- <uv-navbar title="货物入库" :autoBack="true" :placeholder="true" ></uv-navbar>-->

		<div style="height:50rpx"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('货物入库')}}
		</div>

		<view class="bor_bgff screen">
			<view class="in_title">
				{{$t('货物信息')}}
			</view>
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('货物名称')}}
			</view>
			<view class="info_text">
				<input class="info_input" :placeholder="$t('请输入货物名称')" v-model="sub.goods" />
			</view>
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('件数')}}
			</view>
			<view class="info_text">
				<input class="info_input" :placeholder="$t('请输入件数')" v-model="sub.number" />
			</view>
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('重量')}}(kg）
			</view>
			<view class="info_text">
				<input class="info_input" :placeholder="$t('请输入重量')" v-model="sub.weight" />
			</view>
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('体积')}}(m³)
			</view>
			<view class="info_text">
				<input class="info_input" :placeholder="$t('请输入体积')" v-model="sub.volume" />
			</view>
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('尺寸')}}(m)
			</view>
			<view class="item_cc">
				<view class="item">
					<uv-input v-model="sub.goods_l" placeholder="" fontSize="26rpx" shape="circle" border="none"
						:customStyle="{ width: '100%', background: '#F6F7FB', height: '80rpx', padding: '0 20rpx' }">
						<template v-slot:suffix>
							<view class="unit">
								{{$t('长')}}
							</view>
						</template>
					</uv-input>
				</view>
				<view class="item">
					<uv-input v-model="sub.goods_w" placeholder="" fontSize="26rpx" shape="circle" border="none"
						:customStyle="{ width: '100%', background: '#F6F7FB', height: '80rpx', padding: '0 20rpx' }">
						<template v-slot:suffix>
							<view class="unit">
								{{$t('宽')}}
							</view>
						</template>
					</uv-input>
				</view>
				<view class="item">
					<uv-input v-model="sub.goods_h" placeholder="" fontSize="26rpx" shape="circle" border="none"
						:customStyle="{ width: '100%', background: '#F6F7FB', height: '80rpx', padding: '0 20rpx' }">
						<template v-slot:suffix>
							<view class="unit">
								{{$t('高')}}
							</view>
						</template>
					</uv-input>
				</view>
			</view>

			<view class="title">
				{{$t('入库图片')}}
			</view>
			<uv-upload :fileList="fileList1" name="1" multiple :maxCount="10" :previewFullImage="true"
				@afterRead="afterRead" @delete="deletePic"></uv-upload>

			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('存放位置')}}
			</view>
			<view class="info_text">
				<picker @change="bindPickerChange" :value="index" :range="range_storage_zh" style="width:100%">
					<view class="uni-input" style="width:100%">{{ range_storage_zh[index] }}</view>
				</picker>
				<input class="info_input" placeholder="仓库-货位" style="display:none" />
				<uv-icon name="arrow-down" color="#8C8C8C" size="28rpx"></uv-icon>
			</view>

		</view>

		<view class="bor_bgff screen">
			<view class="in_title">
				{{$t('货源信息')}}
			</view>
			<!-- <view class="title">
				{{$t('关联订单')}}
			</view>
			<view class="info_text">
				<input class="info_input" placeholder="请关联订单" v-model="sub.order_no" />
			</view> -->
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('客户名称')}}
			</view>
			<view class="info_text">
				<input class="info_input" placeholder="请输入客户名称" v-model="sub.name" />
			</view>
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('目的地')}}
			</view>
			<view class="info_text">
				<city style="width:100%" :value="siteCity" @change="e => {
					siteCity = e.column3.value;
					siteCityLabel = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;
				}"> {{ siteCityLabel || $t('请选择') }} </city>
				<!-- <input class="info_input" placeholder="请输入目的地" v-model="sub.city"/> -->
			</view>
			<view class="title">
				{{$t('服务')}}
			</view>
			<view class="publish_time">
				<view class="publish_time_item" v-for="(item, index) in businessData" :key="index"
					:class="item.checked ? 'hover' : ''" @click="() => {
						item.checked = !item.checked;
						sub.demand = businessData.filter(item => item.checked).map(item => item.value).join(',')
					}">
					{{ item.name }}
				</view>
			</view>

			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('费用总计')}}
			</view>
			<view class="yue_fei">
				<view class="money">
					<text v-if="unitIndex == 0">₽</text>
					<text v-if="unitIndex == 1">￥</text>
					<input class="input_money" type="text" v-model="sub.price" />
				</view>
				<view class="unit">
					<view class="item" :class="unitIndex == 0 ? 'hover' : ''" @click="clickUnit(0)">
						₽
					</view>
					/
					<view class="item" :class="unitIndex == 1 ? 'hover' : ''" @click="clickUnit(1)">
						￥
					</view>
				</view>
			</view>
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('成本费用')}}
			</view>
			<view class="yue_fei">
				<view class="money">
					<text v-if="unitIndex1 == 0">₽</text>
					<text v-if="unitIndex1 == 1">￥</text>
					<input class="input_money" type="text" v-model="sub.market_price" />
				</view>
				<view class="unit">
					<view class="item" :class="unitIndex1 == 0 ? 'hover' : ''" @click="clickUnit1(0)">
						₽
					</view>
					/
					<view class="item" :class="unitIndex1 == 1 ? 'hover' : ''" @click="clickUnit1(1)">
						￥
					</view>
				</view>
			</view>

		</view>


		<view class="footer_none"></view>
		<view class="footer_btn" @click="stock_save_sub">
			<view class="btn">
				{{$t('确认入库')}}
			</view>
		</view>

	</view>
</template>

<script>
import citySelect from 'pages/publish/components/citySelect.vue';
import { stock_storage, storage } from '@/api/basic.js'
import { stock_save } from '@/api/basic.js'



export default {
	components: {
		citySelect
	},
	data() {
		return {
			w_id: '',
			fileList1: [],
			img: '',
			businessData: [
				{ value: 1, name: this.$t('运输'), checked: false },
				{ value: 2, name: this.$t('报关'), checked: false },
				{ value: 3, name: this.$t('转关'), checked: false },
				{ value: 4, name: this.$t('清关'), checked: false },
				{ value: 5, name: this.$t('仓储'), checked: false },
				{ value: 6, name: this.$t('装卸'), checked: false }
			],
			businessIndex: -1,
			unitIndex: 0,
			unitIndex1: 0,
			siteCity: '',
			siteCityLabel: '',

			range: [],
			range_storage_zh: [],
			range_storage_ru: [],
			index: 0,

			lang: 'zh',
			sub: {
				w_id: '',
				goods: '',
				number: '',
				weight: '',
				volume: '',
				goods_l: '',
				goods_w: '',
				goods_h: '',
				order_no: '',
				name: '',
				city: '',
				price: '',
				market_price: '',
				demand: '',
				stock_storage: ''
			}

		}
	},
	onLoad(options) {
		this.w_id = options.w_id
		this.sub.w_id = this.w_id
		this.lang = uni.getStorageSync('lang')

		this.stock_storage_select()
	},
	methods: {
		back() {
			// uni.navigateBack()
			uni.redirectTo({
			  url: '/pages/storeManage/storeManage'
			});
		},
		bindPickerChange(e) {
			this.index = e.detail.value
			this.sub.stock_storage = this.range[e.detail.value]
			console.log(this.range_storage_zh[this.index])
		},
		stock_storage_select() {
			var that = this
			var range = ['0']
			var range_storage_zh = [this.$t('请选择')]
			var range_storage_ru = [this.$t('请选择')]
			stock_storage({ user_id: uni.getStorageSync('user_id'), w_id: this.w_id }).then(res => {
				if (res.data.data.data) {
					var list = res.data.data.data
					for (var i = 0; i < list.length; i++) {
						range.push(list[i]['val'])
						range_storage_zh.push(list[i]['name'])
						range_storage_ru.push(list[i]['name_ru'])
					}
					that.range = range
					that.range_storage_zh = range_storage_zh
					that.range_storage_ru = range_storage_ru
				}
			})
		},

		clickBusiness(index) {
			this.businessIndex = index
			this.sub.demand = index + 1
		},
		clickUnit(index) {
			this.unitIndex = index
		},
		clickUnit1(index) {
			this.unitIndex1 = index
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: $t('上传中')
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			var that = this;

			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://app.gluz.com.cn/api/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						var json = JSON.parse(res.data)
						that.img = json.data.url
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		stock_save_sub() {
			if (this.sub.goods == '') {
				this.toast('请输入货物名称')
				return false
			}
			if (this.sub.number == '') {
				this.toast('请输入货物数量')
				return false
			}
			if (this.sub.weight == '') {
				this.toast('请输入货物重量')
				return false
			}
			if (this.sub.volume == '') {
				this.toast('请输入货物体积')
				return false
			}
			if (this.sub.goods_l == '') {
				this.toast('请输入货物长度')
				return false
			}
			if (this.sub.goods_w == '') {
				this.toast('请输入货物宽度')
				return false
			}
			if (this.sub.goods_h == '') {
				this.toast('请输入货物高度')
				return false
			}
			//存放位置
			if (this.sub.stock_storage == '') {
				this.toast('请选择存放位置')
				return false
			}

			//客户名称
			if (this.sub.name == '') {
				this.toast('请输入客户名称')
				return false
			}
			//目的地
			if (this.siteCity == '') {
				this.toast('请选择目的地')
				return false
			}

			//费用总计
			if (this.sub.price == '') {
				this.toast('请输入费用总计')
				return false
			}
			//成本费用
			if (this.sub.market_price == '') {
				this.toast('请输入成本费用')
				return false
			}




			this.sub.images = this.img
			this.sub.city = this.siteCity
			if (this.unitIndex == 0) {
				this.sub.price_unit = '₽'
			} else {
				this.sub.price_unit = '￥'
			}
			if (this.unitIndex1 == 0) {
				this.sub.market_price_unit = '₽'
			} else {
				this.sub.market_price_unit = '￥'
			}
			this.sub.user_id = uni.getStorageSync('user_id')
			uni.showLoading({
				title: 'loading...',
				mask: true
			})
			stock_save(this.sub).then(res => {
				uni.hideLoading()
				if (res.data.code == 200) {
					uni.showModal({
						content: this.$t('操作成功'),
						success: () => {
							uni.redirectTo({
							  url: '/pages/storeManage/storeManage'
							});
						}
					})
				}
			})

		}
	}
}
</script>

<style lang="scss">
.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.yue_fei {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.money {
		width: 100%;
		background: #F6F7FB;
		height: 80rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333;
		display: flex;
		align-items: center;

		.input_money {
			border: none;
			background: none;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #333;
			width: 100%;
			padding-left: 5rpx;
		}
	}

	.unit {
		flex-shrink: 0;
		margin-left: 25rpx;
		background: #F6F7FB;
		height: 80rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			width: 40rpx;
			text-align: center;

			&.hover {
				color: #278AFF;
			}
		}
	}
}

.in_title {
	font-size: 32rpx;
	font-weight: bold;
	line-height: 98rpx;
	height: 98rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.bor_bgff {
	margin: 20rpx 24rpx;
	background: #fff;
	border-radius: 20rpx;
}

.info_input {
	width: 100%;
	font-size: 26rpx;
	line-height: 40px;
}

.info_textarea {
	height: 200rpx;
	border-radius: 18rpx;
	background: #F6F7FB;
	padding: 0;
	color: #333;
	font-size: 26rpx;
	line-height: 40rpx;
}

.publish_time {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	gap: 15rpx;

	.publish_time_item {
		width: 200rpx;
		height: 64rpx;
		flex-shrink: 0;
		border-radius: 50rpx;
		background: #F6F7FB;
		color: #333;
		font-size: 24rpx;
		line-height: 64rpx;
		text-align: center;
		border: 1rpx solid transparent;

		&.hover {
			border-color: #278AFF;
			background: #D7E9FF;
			color: #278AFF;
		}
	}
}

.screen {
	padding: 0 24rpx 30rpx;

	.item_cc {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item {
			width: 200rpx;
		}

		.unit {
			color: #1D1D1D;
			font-size: 26rpx;
			line-height: 34rpx;
			padding-right: 10rpx;
		}
	}

	.title {
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding: 34rpx 0 24rpx;
		position: relative;

		.xuan {
			position: absolute;
			right: 0;
			top: 34rpx;
			color: #278AFF;
			font-size: 26rpx;
			font-weight: normal;
		}
	}

	.info_text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 18rpx;
		background: #F6F7FB;
		padding: 20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
	}
}


.navbar_right {
	color: #278AFF;
	font-size: 24rpx;
	line-height: 40rpx;
}

.footer_none {
	width: 100%;
	height: 210rpx;
}

.footer_btn {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
}

.footer_btn1 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 0 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn_red {
		width: 100%;
		height: 110rpx;
		background: #FFB6B6;
		color: #FF1F1F;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}

	.btn_gray {
		width: 100%;
		height: 110rpx;
		background: #C6C6C6;
		color: #fff;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}
}

.footer_big_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 0 0 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn_red {
		flex-shrink: 0;
		width: 240rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: #FF6456;
		font-size: 32rpx;
	}

	.btn_yellow {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		font-size: 32rpx;
	}
}

.footer_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.btn1 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #fff;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		border: 1rpx solid #8C8C8C;
	}

	.btn2 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #F7F7F7;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
	}
}
</style>
